{% import "macros/code-examples.html" as code_examples %}
{% extends "layouts/base.html" %}

<!-- {% block left_side %}
<div class="outline">
  <div class="outline__content">
    <ul>
      <li>
        <a href="{{ root_section.permalink }}"
          class="outline-item {% if section_or_page and section_or_page.permalink == root_section.permalink %}active{% endif %}">
          <span>{{ root_section.title }}</span>
        </a>
      </li>
      {% for page in root_section.pages %}
      <li>
        <a href="{{ page.permalink }}"
          class="outline-item {% if section_or_page and section_or_page.permalink == page.permalink %}active{% endif %}">{{
          page.title }}</a>
      </li>
      {% endfor %}
    </ul>
  </div>
</div>
{% endblock left_side %} -->

{% block main %}
<div class="container content">
  <div style="flex-grow: 1; display: flex; flex-direction: column; align-items: center; margin: 2rem auto">
    <img src="ranim.svg" width="200" alt="Ranim logo" />
    <article class="markdown-body">
      {{ code_examples::process_code_block(content=section_or_page.content) | safe }}
      <!-- {{ section_or_page.content | safe }} -->
    </article>
  </div>
</div>
{% endblock main %}